<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/styles.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery-ui-1.8.16.custom.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/tooltip-generic.css" />
	<!-- scroller css -->
	<link type="text/css" href="<?php echo base_url(); ?>assets/css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

	<script src="<?php echo base_url(); ?>assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="<?php echo base_url(); ?>assets/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
	<script src="<?php echo base_url(); ?>assets/js/jquery.tools.min.js" type="text/javascript"></script>

	<script src="<?php echo base_url(); ?>assets/js/jquery-css-transform.js" type="text/javascript"></script>
	<script src="<?php echo base_url(); ?>assets/js/sun-rays.js" type="text/javascript"></script>
	<script src="<?php echo base_url(); ?>assets/js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
	<script src="<?php echo base_url(); ?>assets/js/jheader-area.js" type="text/javascript"></script>

	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.mousewheel.js"></script>

	<!-- the jScrollPane script -->
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.jscrollpane.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("div.ev_holder").tooltip({
				offset: [60, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#msg-phot[title]").tooltip({
				offset: [100, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#msg-vide[title]").tooltip({
				offset: [100, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#msg-docu[title]").tooltip({
				offset: [100, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#msg-jour[title]").tooltip({
				offset: [100, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#msg-note[title]").tooltip({
				offset: [70, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#rec-view[title]").tooltip({
				offset: [50, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow" style="margin-top: 0px;"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#rec-add[title]").tooltip({
				offset: [100, -190],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			$("#rec-reme[title]").tooltip({
				offset: [95, -200],
				effect: 'slide',
				layout:	'<div><span class="tip-arrow"></span></div>'
				}).dynamic({ bottom: { direction: 'down', bounce: true }
			});
			var pane = $('.scroll-pane');
				pane.jScrollPane(
					{
						showArrows: true
					}
				);
				var api = pane.data('jsp');
				$('#rem-submit').bind(
					'click',
					function()
					{
						api.getContentPane().load(
							'ajax_content.html',
							function()
							{
								api.reinitialise();
							}
						);
						return false;
					}
				);
				$('#but-scroll-to').bind(
					'click',
					function()
					{
						// Note, there is also scrollToX and scrollToY methods if you only
						// want to scroll in one dimension
						api.scrollTo(parseInt($('#toX').val()), parseInt($('#toY').val()));
						return false;
					}
				);

				$('#but-scroll-by').bind(
					'click',
					function()
					{
						// Note, there is also scrollByX and scrollByY methods if you only
						// want to scroll in one dimension
						api.scrollBy(parseInt($('#byX').val()), parseInt($('#byY').val()));
						return false;
					}
				);

		});
	</script>
    <title><?php echo $title; ?></title>
	<!--[if IE 7]>
		<style = "text/css">
			.fc_pass_inp{margin-left:1px !important;}
			#tbl-messages tr td{border-top:1px solid #DDDDDD !important;}
			#tbl-messages td{padding-bottom:5px;}
		</style>
	<![endif]-->
	<!--[if IE 8]>
		<style = "text/css">
			#tbl-messages td{padding-bottom:15px;}
		</style>
	<![endif]-->
	<script language="JavaScript" type="text/javascript">

		$(document).ready(function(){
			$('#cal_inp_date,#ep-birthday').datepicker({
				changeYear: true,
				yearRange: '1900:<?php echo date('Y');?>',
				dateFormat: 'yy-mm-dd'
			});
			//var current_name = $.trim($('#name-h2').html());
			$('#loader img').hide(); $('#edit-pic').hide(); $('#edit-thumbs').hide();
			$('#edit_name img').hide(); $('#edit_me img').hide(); $('#edit_cancel img').hide();
			$('#edit_cancel1 img').hide(); $('#save_name img').hide(); $('#save_me img').hide();

			$('#thumbs').live('mouseenter',function(){
					$('#edit-pic').show();
			});
			$('#thumbs').mouseleave(function(){
				$('#edit-pic').hide();
			});
			$('#edit-pic').click(function(){
				$('#edit-thumbs').show();
			});

			$('#pic_cancel').click(function(){
				$('#edit-thumbs').hide();
			});

			$('#submitpic').click(function(){
	//alert("test");return false;
				var picname  = $('#userpic').attr("value");
				if(picname == ''){
						$('#edit-message').css({
							backgroundColor: '#FCFCC4',
							paddingLeft : '5px',
							color : 'red'
						}).html('Please select a file').fadeIn(1000).delay(1000).fadeOut(1000);
				}
				else{
				$('#edit-profile-form').attr('action','<?php echo base_url();?>profile/update_picture');
				$('#edit-profile-form').submit();
				}
			});

			$('#name-h2').live('mouseenter',function(){
				if(!$('#edit_cancel img').is(':visible')){
					$('#edit_name img').show();
				}
			});
			$('#name-h2').mouseleave(function(){
				$('#edit_name img').hide();
			});
			$('#edit_name img').click(function(){
				$('#edit_name img').hide();
				$('#edit_cancel img').show();
				$('#save_name img').show();
				var f_name = $.trim($('#n-fname').html());
				var l_name = $.trim($('#n-lname').html());
				$('#org_val_fname').html(f_name);
				$('#org_val_lname').html(l_name);
				$('#n-fname').html('<input type="text" size = "10" name = "n-fname" id = "n-fname-id" value = "'+f_name+'">');
				$('#n-lname').html('<input type="text" size = "10" name = "n-lname" id = "n-lname-id" value = "'+l_name+'">');
			});
			$('#edit_cancel').click(function(){
				$('#edit_cancel img').hide();
				$('#edit_name img').show();
				$('#save_name img').hide();
				$('#n-fname').html($('#org_val_fname').html());
				$('#n-lname').html($('#org_val_lname').html());
			});
			$('#about-h2-wrap').live('mouseenter',function(){
				if(!$('#edit_cancel1 img').is(':visible')){
				$('#edit_me img').show();
				}
			});
			$('#about-h2-wrap').mouseleave(function(){
				$('#edit_me img').hide();
			});
			$('#b-day-wrap').live('mouseenter',function(){
				if(!$('#edit_bdatecancel img').is(':visible')){
					$('#edit_bdate img').show();
				}
			});
			$('#b-day-wrap').mouseleave(function(){
				$('#edit_bdate img').hide();
			});
			$('#edit_bdate img').click(function(){
				$(this).hide();
				$('#bdate_txt').hide();
				$('#bdate_datepicker').show();
				$('#edit_bdatecancel img').show();
				$('#save_bdate img').show();
			});
			$('#edit_bdatecancel img').click(function(){
				$(this).hide();
				$('#bdate_txt').show();
				$('#bdate_datepicker').hide();
				$('#save_bdate img').hide();

			});
			$('#save_bdate img').click(function(){
				var path = $('#hidden').attr("value");
				var bdate = $('#cal_inp_date').val();
				$.ajax({
					type:'post',
					url:path,
					data:'dob='+bdate,
					beforeSend: function(){
						$('#loader img').show();
					},
					success:function(data){
						$('#loader img').fadeOut(2000, function(){
							$('#bdate_txt').html('Born on '+data);
							$('#edit-message').css(
							{backgroundColor: '#FCFCC4', paddingLeft : '5px', color : 'red'}
							).html('Successfully saved changes.').fadeIn(500,function(){
								$('#edit_bdatecancel img').trigger('click');
								$('#edit-message').fadeOut(500);
							});
						});
					}
				});
			});
			$('#edit_me img').click(function(){
				$(this).hide();
				$('#edit_cancel1 img').show();
				$('#save_me img').show();
				var about_me = $.trim($('#about_me').html());
				$('#org_me').val(about_me);
				$('#about_me').html('<textarea name="name" rows="20" id = "me" cols="27" wrap="on">'+about_me+'</textarea>');
			});
			$('#edit_cancel1 img').click(function(){
				$(this).hide();
				$('#edit_me img').show();
				$('#save_me img').hide()
				$('#about_me').html($('#org_me').val());
			});
			$('#save_name img').click(function(){
				var path = $('#hidden').attr("value");
				var fname = $('#n-fname-id').val();
				var lname = $('#n-lname-id').val();
				$.ajax({
					url: path,
					data: 'firstname='+fname+'&lastname='+lname,
					type : 'POST',
					beforeSend: function(){
						$('#loader img').show();
					},
					success:function(data){
						$('#loader img').fadeOut(2000, function(){
							$('#edit-message').css(
							{backgroundColor: '#FCFCC4', paddingLeft : '5px', color : 'red'}
							).html('Successfully saved changes.').fadeIn(500).delay(500).fadeOut(1000, function(){
								$('#edit_cancel img').hide(); $('#save_name img').hide();
								var fname = $('#n-fname-id').val();
								var lname = $('#n-lname-id').val();;
								$('#n-fname').html(fname);
								$('#n-lname').html(lname);
							});
						});
					},
					complete: function(){

					}
				});
			});

			$('#save_me img').click(function(){
				var path = $('#hidden').attr("value");
				var me = $('#me').val();
				$.ajax({
					url: path,
					data: 'about='+me,
					type : 'POST',
					beforeSend: function(){
						$('#loader img').show();
					},
					success:function(data){
						$('#loader img').fadeOut(2000, function(){
							$('#edit-message').css(
							{backgroundColor: '#FCFCC4', paddingLeft : '5px', color : 'red'}
							).html('Successfully saved changes.').fadeIn(500).delay(500).fadeOut(1000, function(){
								$('#edit_cancel1 img').hide(); $('#save_me img').hide();
								var about_me = $('#me').val();
								//$('#org_me').val(about_me);
								$('#about_me').html(about_me);
								//alert(about_me);
							});
						});
					},
					complete: function(){
					}
				});
			});
		});
	</script>
</head>
<?php

	$userinfo = (isset($records) && count($records) > 0)? $records:Myuser_helper::getUserData();
	$current_user_record = Myuser_helper::getUserData();
	$is_current_userinfo = (strtolower(trim($userinfo->email)) == strtolower(trim($_SESSION['email'])))? true:false;//if current user's info
?>
<body>
<div id = "bg-container">
	<div id = "sun-rays" class = "sun-rays">
	</div>
</div>
<div class = "clear">
<div id = "wrapper"><!-- start of wrapper-->
	<header>
		<div id = "flash-area">
			<embed src="<?php echo base_url(); ?>assets/images/hearttree-profile.swf" width="212" height="180" type="application/x-shockwave-flash" wmode="transparent" menu="false" />
		</div>
		<div id = "menu-area">
			<ul id = "user-menu">
				<a href = "<?php echo base_url()?>home" title = "Home"><li class = "user-home"></li></a>
				<a href = "<?php echo base_url()?>profile" title = "Profile"><li class = "user-profile"></li></a>
				<a href = "<?php echo base_url()?>testimonial" title = "Testimonials"><li class = "user-testi"></li></a>
				<a href = "#"><li class = "user-faq"></li></a>
				<a href = "<?php echo base_url()?>contact" title = "Contact Us"><li class = "user-contct"></li></a>
			</ul>
		</div>
		<div id = "account-area">
			<div id = "account-wrap">
				<div id = "accountz">
					<?php $current_img_path = $_SERVER['DOCUMENT_ROOT'].'/mlme2/assets/images'.$current_user_record->picture ;?>
					<div class = "profile-pic">
						<?php
							$toResize = (file_exists($current_img_path) && !empty($current_user_record->picture)) ? base_url().'assets/images/'.$current_user_record->picture : base_url().'assets/images/default.png';
							$src = image_helper::resize_photo($toResize, '30', '27');
						?>
						<img src="<?php echo $src?>" alt=""/>
					</div>
					<h2><?php echo $current_user_record->firstname; ?></h2>
					<span id = "arrow-down"><img src = "<?php echo base_url(); ?>assets/images/arrow-down.png" /></a></span>
					<div id = "account-list">
						<ul>
							<li><a href = "<?php echo base_url();?>profile">My Account</a></li>
							<li><a href = "<?php echo base_url();?>profile/edit">Edit Settings</a></li>
							<!--<li><a href = "">Help</a></li>-->
							<li><a href = "<?php echo base_url() ?>profile/logout">Logout</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</header>
	<div id = "wrap">
		<div id = "side-left">
			<div id = "profile-area">
				<form id = "edit-profile-form" name = "edit-profile-form" action = "" method = "POST" enctype="multipart/form-data">
					<div id = "thumbs">
						<?php if($is_current_userinfo):?>
							<div id = "edit-pic">Change Picture</div>
							<input type = "hidden" id = "hidden1" value = "<?php echo base_url();?>profile/update_picture" />
						<?php endif;?>
						<?php
							$img_path = $_SERVER['DOCUMENT_ROOT'].'/mlme2/assets/images'.$userinfo->picture ;
							$basePath = base_url();
							$profilePic =  (file_exists($img_path) && !empty($userinfo->picture))? $basePath.'assets/images'.$userinfo->picture : $basePath.'assets/images/default.png';
							$src = image_helper::resize_photo($profilePic, '185', '185');
						?>
						<table><tr valign="middle"><td><img src="<?php echo $src; ?>" alt="profile pic"/></td></tr></table>

					</div>
					<div id = "edit-thumbs">
						<?php if($is_current_userinfo):?>
							<input type="file" name="userpic" id="userpic" size="15" />
							<span id = "pic_cancel" class="fleft mtop2" title = "Cancel"><img src = "<?php echo base_url()?>assets/images/cancelbutton.png" alt = "cancel"/></span>
							<input type="image" name="submitpic" id="submitpic" src = "<?php echo base_url()?>assets/images/savebutton.png" />
						<?php endif;?>
					</div>
					<div class="clear"></div>
					<input id = "hidden" type = "hidden" value = "<?php echo base_url();?>profile/update_profile"/>
					<p id = "loader"><img src = "<?php echo base_url()?>/assets/images/ajax-loader.gif" /></p>
					<div class="clear"></div>
					<p id = "edit-message"></p>
					<div id = "name-h2">
						<div id = "n-fname" style="float-left"><?php echo $userinfo->firstname; ?></div>
						<div id = "n-lname" style="float-left"><?php echo $userinfo->lastname; ?></div>
						<?php if($is_current_userinfo):?>
						<span id = "edit_name" class="fleft mleft2">
							<img src = "<?php echo base_url()?>assets/images/editbutton.png" />
						</span>
						<span id = "edit_cancel" class="fleft mleft2">
							<img src = "<?php echo base_url()?>assets/images/cancelbutton.png" />
						</span>
						<span id = "save_name">
							<img src = "<?php echo base_url()?>assets/images/savebutton.png" />
						</span>
						<?php endif;?>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div class="fleft" id="b-day-wrap">
						<div class="b_dayicon fleft"></div>
						<div class="fleft" id="bdate_txt">Born on <?php echo date('F d, Y',strtotime($userinfo->dob));?></div>
						<div class="fleft" style="display:none;" id="bdate_datepicker"><input type="text" name="cal_inp_date" id="cal_inp_date" value="<?php echo ($userinfo->dob == '0000-00-00')? '':date('Y-m-d',strtotime($userinfo->dob));?>"/></div>
						<?php if($is_current_userinfo):?>
							<span id = "edit_bdate" class="fleft mleft2">
								<img src = "<?php echo base_url()?>assets/images/editbutton.png" alt="" />
							</span>
							<span id = "edit_bdatecancel" class="fleft mleft2">
								<img src = "<?php echo base_url()?>assets/images/cancelbutton.png" alt="" />
							</span>
							<span id = "save_bdate">
								<img src = "<?php echo base_url()?>assets/images/savebutton.png" alt="" />
							</span>
						<?php endif;?>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div id="about-h2-wrap">
						<h2 id = "about-h2" style="width:60px;">About Me</h2>
						<?php if($is_current_userinfo):?>
							<span id = "edit_me" class="fleft mleft2">
								<img src = "<?php echo base_url()?>assets/images/editbutton.png" />
							</span>
							<span id = "edit_cancel1" class="fleft mleft2">
								<img src = "<?php echo base_url()?>assets/images/cancelbutton.png" />
							</span>
							<span id = "save_me">
								<img src = "<?php echo base_url()?>assets/images/savebutton.png" />
							</span>
						<?php endif;?>
					</div>
					<div class="clear"></div>
					<p id = "about_me"><?php echo $userinfo->about; ?></p>
					<div id="org_val_fname" style="display:none;"></div>
					<div id="org_val_lname" style="display:none;"></div>
					<input type = "hidden" id = "org_me" />
				</form>
			</div>
		</div>
		<div id = "side-right">